---
title: Nâng cấp dApp của bạn cho RainbowKit v2
description: RainbowKit và Wagmi đã được nâng cấp lên v2
image: guide-rainbowkit-v2.png
---

# Di chuyển sang RainbowKit và Wagmi v2

Các phần phụ thuộc ngang hàng [wagmi](https://wagmi.sh) và [viem](https://viem.sh) đã đạt `2.x.x` với các thay đổi quan trọng.

Thực hiện theo các bước dưới đây để di chuyển.

**1. Nâng cấp RainbowKit, `wagmi`, và `viem` lên phiên bản mới nhất**

```bash
npm i @rainbow-me/rainbowkit wagmi viem@2.x
```

**2. Cài đặt phụ thuộc ngang hàng `@tanstack/react-query`**

Với Wagmi v2, [TanStack Query](https://tanstack.com/query/v5/docs/react/overview) hiện là phần phụ thuộc ngang hàng cần thiết.

Cài đặt nó với lệnh sau:

```bash
npm i @tanstack/react-query
```

**3. Nâng cấp cấu hình RainbowKit và Wagmi của bạn**

```diff
  import '@rainbow-me/rainbowkit/styles.css'

+ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
- import { createPublicClient, http } from 'viem'
- import { WagmiConfig } from 'wagmi'
+ import { WagmiProvider, http } from 'wagmi'
- import { configureChains, createConfig } from 'wagmi'
  import { mainnet } from 'wagmi/chains'
  import { RainbowKitProvider } from '@rainbow-me/rainbowkit'
- import { getDefaultWallets, connectorsForWallets } from '@rainbow-me/rainbowkit'
+ import { getDefaultConfig } from '@rainbow-me/rainbowkit'

  /* getDefaultWallets is now optional */
- const { wallets } = getDefaultWallets({
-   appName: 'RainbowKit demo',
-   projectId: 'YOUR_PROJECT_ID',
-   chains,
- })

  /* connectorsForWallets is now optional */
- const connectors = connectorsForWallets([...wallets])

- const { chains, publicClient } = configureChains( 
-   [mainnet, sepolia], 
-   [publicProvider(), publicProvider()],
- )

- const config = createConfig({
-   autoConnect: true,
-   publicClient,
- })

  /* New API that includes Wagmi's createConfig and replaces getDefaultWallets and connectorsForWallets */
+ const config = getDefaultConfig({
+   appName: 'RainbowKit demo',
+   projectId: 'YOUR_PROJECT_ID',
+   chains: [mainnet],
+   transports: {
+     [mainnet.id]: http(),
+   },
+ })

+ const queryClient = new QueryClient()

  const App = () => {
    return (
-     <WagmiConfig config={config}>
+     <WagmiProvider config={config}>
+       <QueryClientProvider client={queryClient}>
-         <RainbowKitProvider chains={chains}>
+         <RainbowKitProvider>
            {/* Your App */}
          </RainbowKitProvider>
+       </QueryClientProvider>
-     </WagmiConfig>
+     </WagmiProvider>
    )
  }
```

**4. Kiểm tra thay đổi làm hỏng trong `wagmi` và `viem`**

Nếu bạn sử dụng các hook `wagmi` và các hành động `viem` trong dApp của bạn, bạn sẽ cần làm theo các hướng dẫn di chuyển cho v2:

- [Wagmi v2 Hướng dẫn Di chuyển](https://wagmi.sh/react/guides/migrate-from-v1-to-v2)
- [Thay đổi phá vỡ Viem v2](https://viem.sh/docs/migration-guide#2xx-breaking-changes)

#### Thay đổi trong RainbowKit

**1. Cải thiện hành vi cho ví EIP-6963**

Các ví hỗ trợ tiêu chuẩn kết nối mới EIP-6963 (bao gồm Rainbow, MetaMask, và hơn thế nữa) giờ đây sẽ tự động xuất hiện trong phần `Installed` trong quá trình trải nghiệm Connect Wallet. Điều này đảm bảo rằng người dùng luôn có thể tìm thấy ví yêu thích của họ và kết nối với dApps mà không gặp các xung đột hoặc nút dự phòng.

Các nhà phát triển tiếp tục có toàn quyền kiểm soát danh sách Ví Tùy Chỉnh để nhấn mạnh các ví ưa thích cho người dùng cuối. Khuyến khích bạn tiếp tục bao gồm `injectedWallet` và `walletConnectWallet` trong danh sách của mình để hỗ trợ tất cả các nền tảng.

**2. Cấu hình Wagmi với getDefaultConfig**

API mới này đơn giản hóa trải nghiệm cấu hình và thay thế nhu cầu sử dụng trực tiếp `createConfig` của Wagmi. Cấu hình chuỗi được đơn giản hóa, bao gồm các nhà cung cấp công cộng suy luận cho `transports`.

Danh sách ví mặc định sẽ được bao gồm tự động, loại bỏ nhu cầu sử dụng `getDefaultWallets` và `connectorsForWallets`.

Bạn có thể tạo một danh sách Ví Tùy chỉnh bằng cách truyền các kết nối Ví Tùy chỉnh hoặc đã nhập khẩu vào `wallets`. Không cần khởi tạo các kết nối ví và truyền `projectId` và `chains` nữa.

```
const config = getDefaultConfig({
  appName: 'RainbowKit demo',
  projectId: 'YOUR_PROJECT_ID',
  chains: [mainnet],
  wallets: [rainbowWallet], /* optional custom wallet list */
  /* Wagmi createConfig options including `transports` are also accepted */
})
```

**3. RainbowKitProvider**

Bạn không cần phải truyền `chains` vào `<RainbowKitProvider>`.

```diff
- <RainbowKitProvider chains={chains}>
+ <RainbowKitProvider>
```

**4. Chuỗi Tùy chỉnh**

Loại `Chain` đã thay đổi theo Wagmi v2 và tiếp tục hỗ trợ metadata `iconUrl` và `iconBackground` của RainbowKit.

```diff
+ import { Chain } from '@rainbow-me/rainbowkit'

  const avalanche = {
    id: 43_114,
    name: 'Avalanche',
    iconUrl: 'https://s2.coinmarketcap.com/static/img/coins/64x64/5805.png',
    iconBackground: '#fff',
    nativeCurrency: { name: 'Avalanche', symbol: 'AVAX', decimals: 18 },
    rpcUrls: {
      default: { http: ['https://api.avax.network/ext/bc/C/rpc'] },
    },
    blockExplorers: {
      default: { name: 'SnowTrace', url: 'https://snowtrace.io' },
    },
    contracts: {
      multicall3: {
        address: '0xca11bde05977b3631167028862be2a173976ca11',
        blockCreated: 11_907_934,
      },
    },
  } as const satisfies Chain
```

Ví dụ với `getDefaultConfig`:

```diff
const config = getDefaultConfig({
+ chains: [
+   avalanche, /* custom chain */
+   {
+     ...mainnet,
+     iconBackground: '#000',
+     iconUrl: 'https://example.com/icons/ethereum.png',
+   }, /* metadata overrides */
+ ],
});
```

Ví dụ với `createConfig`:

```diff
+ import { Chain } from '@rainbow-me/rainbowkit'
+ const chains: readonly [Chain, ...Chain[]] = [
+   {
+     ...mainnet,
+     iconBackground: '#000',
+     iconUrl: 'https://example.com/icons/ethereum.png',
+   },
+ ];
  const config = createConfig({
    chains,
    transports: {
      [mainnet.id]: http(),
    },
  })
```

**5. Ví Tùy chỉnh**

Các đầu nối ví RainbowKit đã trải qua nhiều thay đổi để hỗ trợ Wagmi v2. Tham khảo [tài liệu cập nhật](https://www.rainbowkit.com/docs/custom-wallets) và một [đầu nối ví mẫu](https://github.com/rainbow-me/rainbowkit/tree/main/packages/rainbowkit/src/wallets/walletConnectors/rainbowWallet/rainbowWallet.ts) để nâng cấp bất kỳ Đầu Nối Ví Tùy Chỉnh nào trong dApp của bạn.

Các kết nối ví giờ đây cũng hỗ trợ tiêu chuẩn EIP-6963 với thuộc tính `rdns`. Đảm bảo rằng điều này được điền vào để tránh các tham chiếu trùng lặp đến các ví hỗ trợ EIP-6963 trong danh sách ví của bạn.

> Vui lòng báo cáo bất kỳ vấn đề hoặc phản hồi nào cho RainbowKit v2 trên GitHub [tại đây](https://github.com/rainbow-me/rainbowkit/issues/new/choose).
